<template>
  <div class="clue-item">
    <div v-for="(clue, mskey, msi) in clueData.clues" class="clearfix" v-if="clue.clue_tpl_id < 1" :class="{'no-arrow-wrap': clue.clue_json_text == null }">
      <div :data-id="clue.id" class="timeline-block clearfix"
      :class="{'left':clue}">
        <div class="line"></div>
        <div class="timeline-title" >
          <h3>{{ getDateTime(clue.insert_time) }}</h3>
        </div>
        <!--<span class="timeline-img picture" to="/client-info" v-if="!clue.clue_json_text || !clue.clue_json_text.team">-->
          <!--<img v-if="clue.clue_insert_type === 'YH#' && clue.head_img_url" :src="clue.head_img_url" >-->
          <!--<img v-if="clue.head_img_url == null && clue.user_name == null " src="//fin.91mycloud.com/default-user.jpg" />-->

          <!--<img v-if="clue.clue_insert_type !== 'YH#' && clue.user_head_img && clue.user_name != null" :src="clue.user_head_img" alt="Picture">-->
          <!--<div class="default-user" v-if="clue.clue_insert_type !== 'YH#' && !clue.user_head_img && clue.user_name">{{ clue.user_name }}</div>-->
        <!--</span>-->
        <div class="timeline-content clearfix" :class="{'no-arrow': clue.clue_json_text && clue.clue_json_text.team }">
          <!-- <h2><span class="mark follow-state">{{ clue.clue_type | getFollowStatename }}</span><i class="date-ico">{{ clue.insert_time.split(' ')[1] }}</i></h2> -->
          <div class="timeline-content-body">
            <p class="timeline-content-time">{{ clue.insert_time }}</p>
            <!-- <h4 v-if="clue.clue_type">{{ clue.clue_type | clueType }}</h4> -->
            <h4 v-if="clue.clue_json_text && clue.clue_json_text.title">{{ clue.clue_json_text.title }}</h4>
            <p class="clue-desc">{{ clue.clue_desc }}</p>
            <!-- 客户分配 -->
            <p v-if="clue.clue_json_text && clue.clue_json_text.baby_name">宝宝：{{ clue.clue_json_text.baby_name }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.deposit">定金：{{ clue.clue_json_text.deposit }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.team">团队：{{ clue.clue_json_text.team }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.type">模式：{{ clue.clue_json_text.type }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.from">从：{{ clue.clue_json_text.from }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.to">到：{{ clue.clue_json_text.to }}</p>
            <!-- 客户分配 -->
            <p v-if="clue.user_name">录入人：{{clue.user_name}}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.source">来源：{{ clue.clue_json_text.source }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.contract_money">签约金额：{{ clue.clue_json_text.contract_money }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.contract_number">合同编号：{{ clue.clue_json_text.contract_number }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.channel">渠道：{{ clue.clue_json_text.channel }}</p>
            <p v-if="clue.clue_location" style="padding: 0 0 6px;">跟进位置：{{ clue.clue_location }}</p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.insert_time">{{ clue.clue_type | clueType }}时间：{{ clue.clue_json_text.insert_time }}</p>
            <p v-if="clue.next_time">下次提醒时间：{{ clue.next_time }}</p>

            <p v-if="clue.clue_json_text && clue.clue_json_text.imgs && clue.clue_json_text.imgs.length" class="imgs-main">
              <router-link class="img-square" v-for="(image, index) in clue.clue_json_text.imgs" :key="index" :to="{'path':'img-view', query: {url:image.url}}" >
                <img class="messageImg" :src="image.url" />
              </router-link>
            </p>
            <!-- <p v-if="messages.notiUser">通知他人：{{ clue.notiUser }}</p> -->
          </div>
          <div class="round"></div>
          <div class="invalid-clue" v-if="clue.is_valid === 0"></div>
        </div>
      </div>
    </div>
    <div v-for="(clue, mskey, msi) in clueData.clues" class="clearfix" v-if="clue.clue_tpl_id >= 1 && clue.clue_content" :class="{'no-arrow-wrap': clue.clue_json_text && clue.clue_json_text.team }">
      <div :data-id="clue.id" class="timeline-block clearfix"
          :class="{'left':clue}">
        <div class="line"></div>
        <!--<span class="timeline-img picture" to="/client-info" v-if="clue.clue_content">-->
          <!--<img v-if="clue.is_event == 0 && clue.head_img_url != null " :src="clue.head_img_url" >-->
          <!--<img v-if="clue.is_event == 0 && clue.head_img_url == null && clue.user_name == null" src="//fin.91mycloud.com/default-user.jpg" />-->

          <!--<img v-if="clue.is_event == 0 && clue.user_head_img && clue.user_name != null" :src="clue.user_head_img" alt="Picture">-->
          <!--<div class="default-user" v-if="clue.is_event == 0 && !clue.user_head_img && clue.user_name">{{ clue.user_name }}</div>-->
        <!--</span>-->
        <div class="timeline-title" >
          <h3>{{ getDateTime(clue.insert_time) }}</h3>
        </div>
        <div class="timeline-content clearfix" :class="{'no-arrow': clue.clue_json_text && clue.clue_json_text.team }">
          <div class="timeline-content-body" >
            <p class="timeline-content-time">{{ clue.insert_time }}</p>
            <p v-html="clue.clue_content"></p>
            <p v-if="clue.clue_json_text && clue.clue_json_text.imgs && clue.clue_json_text.imgs.length" class="imgs-main">
              <router-link class="img-square" v-for="(image, index) in clue.clue_json_text.imgs" :key="index" :to="{'path':'img-view', query: {url:image.url}}" >
                <img class="messageImg" :src="image.url" />
              </router-link>
            </p>
            <div class="invalid-clue" v-if="clue.is_valid === 0"></div>
          </div>
          <div class="round"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['clueData'],
  data () {
    return {
      timeStr: {
        first: '',
        two: ''
      }
    }
  },
  methods: {
    getDateTime (time) {
      if (!time) {
        return '未知'
      }

      try {
        var reg = new RegExp(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})(\s)(\d{1,2})(:)(\d{1,2})(:{0,1})(\d{0,2})$/)
        var beginArr = time.match(reg)

        var begDate = new Date(beginArr[1], beginArr[3] - 1, beginArr[4], beginArr[6], beginArr[8], beginArr[10])
        var endDate = new Date()

        var begStr = begDate.getFullYear() + '-' + begDate.getMonth() + '-' + begDate.getDate()
        var endStr = endDate.getFullYear() + '-' + endDate.getMonth() + '-' + endDate.getDate()
        var result = ""

        if (begStr == endStr) {
          result = '今天'
        } else {
          result = beginArr[3] + '月' + beginArr[4] + '日'
        }
      } catch (e) {

      }
      // this.timeStr.two = result
      // if (this.timeStr.first === this.timeStr.two) {
      //   return ''
      // }

      this.timeStr.first = result
      return result
    }
  }
}
</script>
<style lang="less">

</style>


